<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <div class="wrap" id="wrap">
        <div class="btn" data-type="btn" data-feat="add">添加</div>
        <div class="btn" data-type="btn" data-feat="delete">绘画</div>
        <div class="btn" data-type="btn" data-feat="delete">散步</div>
        <div class="btn" data-type="btn" data-feat="delete">静坐</div>
    </div>
    <script>
        document.getElementById('wrap').addEventListener('click', function(e){
            console.log(e)
	var target = e.target;
	while(target !== this){
		var type = target.dataset.type;
		if(type == 'btn'){
			var feat = target.dataset.feat;
			switch(feat){
				case 'add':
					this.innerHTML += '<div class="btn" data-type="btn" data-feat="delete">静坐</div>'
					return;
				case 'delete':
					target.parentNode.removeChild(target);
					return;
			}
		}
		target = target.parentNode;
	}
}, false);
    </script>
</body>
</html>